<template>
    <div>
        <van-form >
            <van-field
                    v-model="username"

                    name="用户名"
                    label="用户名"
                    placeholder="请输入用户名"
                    :rules="[{require: true}]"/>
           <!-- <van-field
                    v-model="phoneNumber"
                    name="电话号码"
                    label="电话号码"
                    placeholder=""
                    :rules="[{require: true}]"
            />-->
            <van-field
                    style="height: 10vh"
                    v-model="description"
                    name="个人简介"
                    label="个人简介"
                    autosize
                    placeholder="简单介绍一下自己~"/>
            <van-field name="userHeader" label="上传头像">
                <template #input>
                    <van-uploader :after-read="afterRead"
                                  multiple :max-count="1"
                                  v-model="fileList"
                    />
                </template>
            </van-field>
            <van-button round block type="info"
                        native-type="submit"
                        v-on:click="submit"
            >提交</van-button>
        </van-form>
    </div>
</template>
<script>

    import Vue from 'vue';
    import {Form,Stepper,Uploader,Checkbox,CheckboxGroup} from 'vant';
    import {ApiService} from "../../../axios/apiService";
    Vue.use(Form);
    Vue.use(Form);
    Vue.use(Stepper);
    Vue.use(Uploader);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    export default {
        data() {
            return {
                fileList:[],
                username:'',
                phoneNumber:'',
                userHeaderUrl:'',
                description:'',

            };
        },
        methods:{
            async afterRead(file) {
                console.log("this.afterRead()")
                //初试化
                let OSS = require('ali-oss');
                // var testFile = new File();
                // console.log(testFile);

                let client = new OSS({
                    region: 'oss-cn-chengdu',
                    accessKeyId:'LTAI5tKbKKZo33r8EpDqgGWH',
                    accessKeySecret:'wPzuRowwhcB7brUAwDfTcEIo8hAnBI',
                    bucket: 'jingzai-pethome',
                });
                //此时可以自行将文件上传至服务器
                try {
                    // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
                    // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
                    console.log(new Date().getTime())
                    var ti = new Date().getTime()
                    let result = await client.put('/img/'+ti+'.jpg',file.file)
                    console.log(result)
                    console.log("图片链接："+result.url)
                    this.userHeaderUrl =  result.url

                } catch (e) {
                    console.log(e);

                }

            },
            submit() {
                const editUserMessage = new ApiService("/edit/userMessage")
                console.log("提交")
                console.log(editUserMessage.getCookie("userid"))
                console.log(this.username)
                console.log(this.description)
                console.log(this.userHeaderUrl)

                editUserMessage.getParams({
                    userId:editUserMessage.getCookie("userid"),
                    userName:this.username,
                    userMessage:this.description,
                    userHeaderUrl:this.userHeaderUrl
                }).then(res=>{
                    console.log("res.data:")
                    console.log(res.data)
                })
            }
        }
    };
</script>